<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="css/login.css">
    <!-- 添加外部库引用 -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
</head>
<body>
    <div class="login-container">
        <h2>用户登录</h2>
        <form onsubmit="event.preventDefault(); login();">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
            </div>
            <button type="submit" class="login-btn">登录</button>
            <div class="signup-link">
                没有账号？<a href="./register.html">立即注册</a>
            </div>
        </form>
    </div>

<script>
    function login() {
        const username = $('#username').val();
        const password = $('#password').val();

        const loginData = {
            username: username,
            password: md5(password),
        };

        $.ajax({
            url: "/login",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(loginData),
            success: function(res) {
                if (!res.result) {
                    $('#username').val('');
                    $('#password').val('');
                    alert(res.reason);
                } else {
                    window.location.href = "/game_hall.html";
                }
            },
            error: function(xhr) {
                $('#username').val('');
                $('#password').val('');
                alert('请求错误：' + xhr.reason);
            }
        });
    }
</script>
</body>
</html>